<template>
	<view class="bg">
		<xl-navbar title="级联数据部件" fixed shadow></xl-navbar>
		<view class="title">默认二级列表、高500rpx、显示左侧</view>
		<xl-cascade :list="categorys"></xl-cascade>
		
		<view class="title">二级添加Banner</view>
		<xl-cascade :list="categorys" banner="/static/imgs/pic.png"></xl-cascade>
		
		<view class="title">胶囊类型显示，可以设当前选中值</view>
		<xl-cascade :list="categorys" banner="/static/imgs/pic.png" type="capsule" curId="12"></xl-cascade>
		
		<view class="title">添加一级全部</view>
		<xl-cascade :list="categorys" showAll></xl-cascade>
		
		<view class="title">二级隐藏左栏</view>
		<xl-cascade :list="categorys" hiddenLeft></xl-cascade>
		
		<view class="title">二级触发事件加载数据</view>
		<xl-cascade @load="load"></xl-cascade>
		
		<view class="title">API请求加载数据，优先级大于事件加载</view>
		<xl-cascade loadApi=""></xl-cascade>
		
		<view class="title">配置统一跳转URL路径</view>
		<xl-cascade :list="categorys" url="tabs"></xl-cascade>
		
		<view class="title">不同处理，使用点击事件</view>
		<xl-cascade :list="categorys" @click="clickItem"></xl-cascade>
		
		<view class="title">三级列表</view>
		<xl-cascade :list="categorys2" :cascade="3"></xl-cascade>
		
		<view class="title">三级触发事件加载数据</view>
		<xl-cascade :cascade="3" @load="load2"></xl-cascade>
		
		<view class="title">分级事件加载数据</view>
		<xl-cascade :cascade="3" @load="load3" @loadChildren="load4"></xl-cascade>
		
		<view class="title">一级事件加载，二三级API请求</view>
		<xl-cascade :cascade="3" @load="load3" loadChildApi=""></xl-cascade>
		
		<view class="title">API请求加载数据，优先级大于事件加载</view>
		<xl-cascade :cascade="3" loadApi="" loadChildApi=""></xl-cascade>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const categorys = ref([
		{id: '1', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '11', name: '部件模板', img: '/static/imgs/logo.png'},{id: '12', name: '页面模板', img: '/static/imgs/logo.png'}]},
		{id: '2', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '21', name: '部件模板', img: '/static/imgs/logo.png'}]},
		{id: '3', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '31', name: '部件模板', img: '/static/imgs/logo.png'},{id: '32', name: '页面模板', img: '/static/imgs/logo.png'},{id: '33', name: '页面模板', img: '/static/imgs/logo.png'}]},
		{id: '4', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '41', name: '部件模板', img: '/static/imgs/logo.png'},{id: '42', name: '页面模板', img: '/static/imgs/logo.png'}]},
	])
	
	const categorys2 = ref([
		{id: '1', name: '部件模板', img: '/static/imgs/pic.png', children: [
			{id: '11', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '111', name: '部件模板', img: '/static/imgs/logo.png'}]},
			{id: '12', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '121', name: '部件模板', img: '/static/imgs/logo.png'}]},
		]},
		{id: '2', name: '页面模板', children: [
			{id: '21', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '111', name: '部件模板', img: '/static/imgs/logo.png'}]},
			{id: '22', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '221', name: '部件模板', img: '/static/imgs/logo.png'}]},
		]},
		{id: '3', name: '页面模板', img: '/static/imgs/pic.png', children: [
			{id: '31', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '311', name: '部件模板', img: '/static/imgs/logo.png'}]},
			{id: '32', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '321', name: '部件模板', img: '/static/imgs/logo.png'}]},
		]},
		{id: '4', name: '页面模板', children: [
			{id: '41', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '411', name: '部件模板', img: '/static/imgs/logo.png'}]},
			{id: '42', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '421', name: '部件模板', img: '/static/imgs/logo.png'}]},
		]},
	])
	
	
	function load(init){
		// 二级级联时，一二级数据一起请求下来
		uni.$xl.apis.test().then(()=>{
			init([
				{id: '1', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '11', name: '部件模板', img: '/static/imgs/logo.png'},{id: '12', name: '页面模板', img: '/static/imgs/logo.png'}]},
				{id: '2', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '21', name: '部件模板', img: '/static/imgs/logo.png'}]},
				{id: '3', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '31', name: '部件模板', img: '/static/imgs/logo.png'},{id: '32', name: '页面模板', img: '/static/imgs/logo.png'},{id: '33', name: '页面模板', img: '/static/imgs/logo.png'}]},
				{id: '4', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '41', name: '部件模板', img: '/static/imgs/logo.png'},{id: '32', name: '页面模板', img: '/static/imgs/logo.png'}]},
			])
		})
	}
	
	function load2(init){
		// 三级级联时，可以所有数据一起请求下来，也可以只请求一级数据
		uni.$xl.apis.test().then(()=>{
			init([
				{id: '1', name: '部件模板', img: '/static/imgs/pic.png', children: [
					{id: '11', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '111', name: '部件模板', img: '/static/imgs/logo.png'}]},
					{id: '12', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '121', name: '部件模板', img: '/static/imgs/logo.png'}]},
				]},
				{id: '2', name: '页面模板', children: [
					{id: '21', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '111', name: '部件模板', img: '/static/imgs/logo.png'}]},
					{id: '22', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '221', name: '部件模板', img: '/static/imgs/logo.png'}]},
				]},
				{id: '3', name: '页面模板', img: '/static/imgs/pic.png', children: [
					{id: '31', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '311', name: '部件模板', img: '/static/imgs/logo.png'}]},
					{id: '32', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '321', name: '部件模板', img: '/static/imgs/logo.png'}]},
				]},
				{id: '4', name: '页面模板', children: [
					{id: '41', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '411', name: '部件模板', img: '/static/imgs/logo.png'}]},
					{id: '42', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '421', name: '部件模板', img: '/static/imgs/logo.png'}]},
				]},
			])
		})
	}
	
	function load3(init){
		uni.$xl.apis.test().then(()=>{
			init([
				{id: '1', name: '部件模板', img: '/static/imgs/pic.png'},
				{id: '2', name: '页面模板'},
				{id: '3', name: '页面模板'},
				{id: '4', name: '页面模板'}
			])
		})
	}
	
	function load4(item, initChildren){
		console.log(item);
		uni.$xl.apis.test().then(()=>{
			initChildren([
				{id: '11', name: '部件模板', img: '/static/imgs/logo.png', children: [{id: '111', name: '部件模板', img: '/static/imgs/logo.png'}]},
				{id: '12', name: '页面模板', img: '/static/imgs/logo.png', children: [{id: '121', name: '部件模板', img: '/static/imgs/logo.png'}]},
			])
		})
	}
	
	function clickItem(item){
		console.log(item);
		uni.$xl.toast(item.id)
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f9f9f9;
	}
	/* #endif */
	.bg{
		background-color: #f9f9f9;
	}

</style>